<template>
  <div class="chat-container">
    <h3>与 {{ friendName }} 聊天</h3>
    <!-- 聊天内容区域 -->
    <div class="message-container">
      <ul id="messages">
        <!-- 聊天消息展示 -->
      </ul>
      <!-- 新增：渲染图片 -->
      <!-- <img v-if="messageImg" :src="messageImg" alt="消息图片" style="max-width: 100%; height: auto;" /> -->
      <!-- 新增：下载按钮 -->
      <button v-if="filePath" @click="downloadFile(filePath)">下载文件</button>
    </div>
    <!-- 输入框和发送按钮 -->
    <div class="input-container">
      <input v-model="text" type="text" placeholder="输入消息..." />
      <button @click="chooseFile">选择并上传发送文件</button>
      <button @click="sendMessage">发送</button>
    </div>
  </div>
</template>

<script>
import Stomp from 'stompjs';
import SockJS from 'sockjs-client/dist/sockjs.min.js';

export default {
  data() {
    return {
      friendName: "", // 好友用户名
      userId: "",
      text: "", // 输入框绑定的文本
      filePath: null, // 文件路径
      socketTask: null, // WebSocket任务对象
      selectedFile: null, // 存储选中的文件
      messageImg: null, // 新增字段，用于存储图片的完整路径
      sendImg: null
    };
  },
  mounted() {
    this.connect();
  },
  beforeDestroy() {
    // 关闭WebSocket连接
    if (this.socketTask) {
      this.socketTask.close();
    }
  },
  methods: {
    connect() {
      // 使用 SockJS 和 STOMP 客户端（需提前引入 stompjs 和 sockjs-client 库）
      const socket = new SockJS('http://localhost:8081/ws'); // 修改为 ws 协议
      this.stompClient = Stomp.over(socket); // 创建 STOMP 客户端

      // 连接 WebSocket
      this.stompClient.connect(
        { login: this.userId }, // 可传递 headers
        (frame) => { // 连接成功回调
          console.log('STOMP连接成功', frame);

          // 订阅用户专属队列 (STOMP规范)
          this.stompClient.subscribe(
            `/user/${this.userId}/messages`, // 目标地址与后端 convertAndSendToUser 匹配
            (message) => { // 收到消息的回调
              console.log('收到消息', message.body);
              const msg = JSON.parse(message.body);
              this.receiveMessage(msg);
            }
          );
        },
        (error) => { // 连接失败回调
          console.error('STOMP连接失败', error);
        }
      );
    },

    sendMessage() {
      const message = {
        senderId: this.userId,
        receiverId: this.friendName,
        text: this.text,
        filePath: this.filePath
      };

      // 使用 STOMP 协议发送消息（自动处理协议头）
      if (this.stompClient && this.stompClient.connected) {
        this.stompClient.send(
          '/app/sendMessage',
          {}, // 移除 headers，避免干扰
          JSON.stringify(message)
        );
        console.log('消息已通过STOMP发送');
        this.messageImg = "";
      } else {
        console.error('STOMP连接未就绪');
      }
      // 新增：渲染发送的消息到 message-container
      this.renderMessage(message, true);

      this.text = '';
      this.filePath = null;
    },
    receiveMessage(message) {
      // 新增：渲染接收的消息到 message-container
      this.renderMessage(message, false);
      this.filePath = message.filePath || null;
      // 新增逻辑：判断是否为图片文件
      if (message.filePath && /\.(png|jpg|jpeg|gif|bmp)$/i.test(message.filePath)) {
        this.messageImg = `http://localhost:8081/images/${message.filePath}`;
      } else {
        this.messageImg = null; // 非图片文件时清空 messageImg
      }
    },
    // 修改方法：渲染消息到 message-container
    renderMessage(message, isSent) {
      const messagesList = document.getElementById('messages');
      const listItem = document.createElement('li');
      listItem.classList.add(isSent ? 'sent-message' : 'received-message');

      // 拼接文本内容
      const textContent = document.createTextNode(`发件人: ${message.senderId}, 内容: ${message.text}`);
      listItem.appendChild(textContent);

      // 新增：判断当前消息是否包含图片信息
      if (message.filePath && /\.(png|jpg|jpeg|gif|bmp)$/i.test(message.filePath)) {
        const imgElement = document.createElement('img');
        imgElement.src = `http://localhost:8081/images/${message.filePath}`;
        imgElement.style.maxWidth = '100%';
        imgElement.style.height = 'auto';
        listItem.appendChild(imgElement);
      }

      messagesList.appendChild(listItem);
    },
    // 修改方法：选择文件后直接上传
    chooseFile() {
      uni.chooseFile({
        count: 1, // 允许选择的文件数量
        success: (res) => {
          console.log('文件选择成功', res.tempFiles[0]);
          this.selectedFile = res.tempFiles[0]; // 保存选中的文件
          this.handleFileUpload(); // 自动调用上传文件方法
        },
        fail: (err) => {
          console.error('文件选择失败', err);
        }
      });
    },
    handleFileUpload() {
      if (!this.selectedFile) {
        console.error('未选择文件');
        return;
      }

      // 使用 UNIAPP 的 uploadFile 方法上传文件
      uni.uploadFile({
        url: 'http://localhost:8081/upload', // 后端上传接口地址
        filePath: this.selectedFile.path, // 文件路径
        name: 'file', // 文件字段名
        formData: {
          userId: this.userId, // 当前用户ID
          friendName: this.friendName // 好友用户名
        },
        success: (uploadRes) => {
          console.log('文件上传成功', uploadRes);
          const filePath = uploadRes.data; // 获取后端返回的文件路径
          this.filePath = filePath;
          console.log('文件路径:', this.filePath);

          // 新增：判断上传的文件是否为图片
          if (filePath && /\.(png|jpg|jpeg|gif|bmp)$/i.test(filePath)) {
            this.sendImg = `http://localhost:8081/images/${filePath}`;
          } else {
            this.sendImg = null; // 非图片文件时清空 sendImg
          }

          this.sendMessage(); // 上传成功后直接调用 sendMessage 方法
        },
        fail: (err) => {
          console.error('文件上传失败', err);
        }
      });
    },
    downloadFile(fileName) {
      // 使用 fetch 获取文件数据
      fetch(`http://localhost:8081/download?filename=${encodeURIComponent(fileName)}`)
        .then(response => {
          if (!response.ok) {
            throw new Error('文件下载失败');
          }
          return response.blob(); // 将响应转换为 Blob
        })
        .then(blob => {
          // 创建下载链接
          const url = URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.href = url;
          a.download = fileName; // 设置下载的文件名
          document.body.appendChild(a);
          a.click(); // 触发下载
          document.body.removeChild(a);
          URL.revokeObjectURL(url); // 释放 URL 对象
          uni.showToast({
            title: '文件保存成功',
            icon: 'success',
          });
        })
        .catch(error => {
          console.error('文件下载失败', error);
          uni.showToast({
            title: '文件下载失败',
            icon: 'none',
          });
        });
    },
  },
  created() {
    // 从 URL 查询字符串中获取好友用户名
    this.friendName = this.$route.query.friendName || "未知好友";
    this.userId = uni.getStorageSync('username'); // 获取当前用户ID
  },
};
</script>

<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.message-container {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

#messages {
  list-style-type: none;
  padding: 0;
}

/* 新增：发送消息样式 */
.sent-message {
  text-align: left;
  margin-bottom: 10px;
  background-color: #4caf50;
  /* 绿色背景 */
  color: white;
  /* 白色字体 */
  padding: 5px 10px;
  border-radius: 5px;
}

/* 新增：接收消息样式 */
.received-message {
  text-align: right;
  margin-bottom: 10px;
  background-color: #2196f3;
  /* 蓝色背景 */
  color: white;
  /* 白色字体 */
  padding: 5px 10px;
  border-radius: 5px;
}

.input-container {
  display: flex;
  align-items: center;
  padding: 10px;
  border-top: 1px solid #ccc;
}

.input-container input[type="text"] {
  flex: 1;
  margin-right: 10px;
  padding: 5px;
}

.input-container input[type="file"] {
  margin-right: 10px;
}

.input-container button {
  padding: 5px 10px;
  background-color: #2196f3;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>